<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style>
		.disable{
			background: orange;
		}
	</style>
	<body>
		<div id="app">
			<div class="container">
		         	<post v-for="pos in posts" :post="pos"></post><!--这里的pos in posts中的posts是data中的定义的数组，
		         												后面:post="pos"中pos是前面pos in posts中定义的名字
		         												:post="pos"中post是组件里props中定义的名字-->
		           <!--这里即将渲染出评论的投票列表-->
		       
		        <div id="commentBox">
		        	请输入您的评论：<input type="text" v-model="content"  @keyup.enter="postComment"/>
		        	<button @click="postComment">提交评论</button>
		        </div>
		    </div>
		</div>
		<template id='postTel'>
			<!--命名很重要，posts的意思是，这个数据是从ajax的post请求过来的数据，为了便于理解，
			才取名为posts，为了让自己的组件名字一看就知道关联，所以把模板的id定义为#postTpl，tpl是template的简写，
			自定义标签的命名也是post。总之，就是这样的细节，不仅方便自己阅读，也方便其他人阅读你的代码。-->
			
				<li>
					<!--对样式进行绑定，绑定的内容是一个对象，对象里面是class的名字和class对应的状态，true显示，false不显示。-->
				<button class="up" @click="upvote" :class="{disable:upvoted}" >我支持</button>
				<span>票数：{{votes}}</span>
				<button class="down" @click="downvote" :class="{disable:downvoted}">我反对</button>
				<span>话题：{{post.title}}</span>
				</li>
		
		</template>
		<script type="text/javascript">
			Vue.component('post',{
				template:'#postTel',
				props:['post'],//注册的子组件需要的props是父级的posts数组中的 一个元素对象post
				data:function(){//data必须为function，定义投票状态
					return {
						upvoted:false,
						downvoted:false
					}
				},
				methods:{//点击按钮改变状态，
					upvote:function(){
						this.upvoted = !this.upvoted;//及时的改变另一个状态
						this.downvoted = false;
					},
					downvote:function(){
						this.downvoted = !this.downvoted;
						this.upvoted = false;
					}
				},
				computed:{//与状态的值绑定，跟随变化
					votes:function(){
						console.log("!1")
						if (this.upvoted) {
							return this.post.votes+1;
						} else if(this.downvoted){
							return this.post.votes-1;
						}else{
							return this.post.votes;
						}
					}
				}
			});
			var vm = new Vue({
				el:'#app',
				data:{
					posts:[{
						title:'各位大大,投我一票~',
						votes:15
					},{
						title:'投我才是王道！',
						votes:40
					},{
						title:'不要投给楼上的',
						votes:10
					}],
					content:''
				},
				methods:{
					postComment:function(){
						this.posts.push({
							title:this.content,
							votes:0
						});
						this.content = '';
					}
				}
			});
		</script>
	</body>
</html>
